<template>

<div class="home">
news <br>
<ul>
  <li v-for="item in list" :key="item.id">
    <button @click="detail(item)">详情</button>
    <!-- 第一种写法传参 -->
    <!-- <RouterLink :to="`/news/detail?id=${item.id}&title=${item.title}&content=${item.content}`">{{ item.title }}</RouterLink> -->
    
    <!-- 第二种写法 -->
    <!-- query传参 -->
    <!-- <RouterLink 
      :to="{
        // path: '/news/detail',
        name: 'xiang',
        query: {
          id: item.id,
          title: item.title,
          content: item.content
        }
      }"
    >
      {{ item.title }}
    </RouterLink>  -->
     
    <!-- params传参 
        params对象传参 必须配合name使用 path无效
        params没法传递数组和对象
    -->
    <!-- <RouterLink :to="`/news/detail/${item.id}/${item.title}/${item.content}`">{{ item.title }}</RouterLink> -->
    <RouterLink 
      :to="{
        name: 'xiang',
        params: {
          id: item.id,
          title: item.title,
          content: item.content
        }
      }"
    >
      {{ item.title }}
    </RouterLink>
  </li>
</ul>
<br> <br> <br>
<div class="main">
  <RouterView></RouterView>
</div>
</div>
</template> 

<script setup lang="ts" name="News">
import {reactive} from 'vue'
import { useRouter }  from 'vue-router'
let router = useRouter()
const list = reactive([
  {
    id: '001',
    title: 'zxc1111',
    content: '111111111111'
  },
  {
    id: '002',
    title: 'zxc222222',
    content: '22222222'
  },
  {
    id: '003',
    title: 'zxc3333',
    content: '3333333333'
  },
  {
    id: '004',
    title: 'zxc4444',
    content: '44444444444'
  }
])

  const detail = (item:any) => {
    router.push({
      name: 'xiang',
      params: {
        id: item.id,
        title: item.title,
        content: item.content
      }
    })
  }
</script>
<style>

</style>